<script setup>
import { getDosendmsgcode, getDocheckcode } from '@/api/step'
import { ref } from 'vue'
import { showSuccessToast, showFailToast } from 'vant';
import { useRouter } from 'vue-router';

const sms = ref('')
const router = useRouter()

// 提交
function onSubmit() {
    getDocheckcode(
        {
            tel: window.localStorage.getItem('tel'),
            telcode: sms.value
        }
    ).then(res => {
        console.log(res.data);
        if (res.data.code !== '200') {
            showFailToast('验证码错误')
        } else {
            showSuccessToast('下一步');
            router.push('./step3')
        }
    })
}

// 发送验证码
function fun() {
    getDosendmsgcode({
        tel: window.localStorage.getItem('tel'),// 获取存储的手机号
    }).then(res => {
        sms.value = res.data.data
        console.log(res.data);
    })
}
</script>
<template>
    <div class="box_big">      
        <div class="box_middle">
            <div>
                <h1>输入验证码</h1>
                <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码">
                    <template #button>
                        <van-button @click="fun" size="small" type="primary">发送验证码</van-button>
                    </template>
                </van-field>
            </van-cell-group>
            <div style="margin: 16px">
                <van-button round block type="primary" native-type="submit">
                    提交验证码
                </van-button>
            </div>
        </van-form>
            </div>
        </div>
    </div>
</template>




<style lang="scss" scoped>
h1 {
    margin-top: 50px;
    text-align: center;
}

.van-cell-group {
    border: 1px solid rgb(102, 201, 255);
    width: 300px;
    margin: 0 auto;
}
.box_big {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, #7A88FF, #7AFFAF);
    position: relative;

    .box_middle {
        height: 400px;
        width: 80%;
        background-color: white;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 10px 10px 20px hotpink;
        .box_small{
            position: absolute;
            top: 50px;
            .submit{
            width: 250px;
            left: 25px;
        }
        }
        
    }
}
</style>